<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="csrf-token" content="{:token()}">
		<link rel="stylesheet" href="/static/weui/css/weui.css">
		<link rel="stylesheet" href="/static/weui/css/weuix.css">
		<link rel="stylesheet" href="/static/weui/css/mydmcss.css?r=1">
		<link rel="stylesheet" href="/static/weui/css/animate-mini.css" />
		<script src="/static/weui/js/zepto.min.js"></script>
		<script src="/static/weui/js/zepto.weui.js"></script>
		
	
		<script src="/static/weui/js/zepto.fullpage.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			var tdesc='{$cuser["nickname"]}邀请您，点亮消防安全，共建平安牛城。';
		</script>
		<script src="/static/weui/js/xf.js"></script>
		<style>
			
.zfs{

	position: absolute;
	display: block;
    top: 0;
    right:0;
	width: 200px;
   font-size: 16px;
    padding: 5px;
    color:#fff;
	animation:pulse 2100ms infinite;
	
}

		</style>
	<title>点亮牛城 平安过年</title>
</head>
<body ontouchstart>
	<div class="weui-header"  style="position: absolute; z-index: 9999; "> 
		<div class="weui-header-left" onclick="javascript:history.back(-1)"> <a  class="icon icon-109 f-white"></a>  </div>
		 <h1 class="weui-header-title"></h1>
	</div>  
	<div class="fullpage">
		<div id="fullpage">
			<div class="page page1">
				<img src="/static/weui/images/dl/zuodao.png" onclick="$.fn.fullpage.moveNext(true);" class="btnzd "/>
			</div>
			<div class="page page2">
				<img src="/static/weui/images/dl/zuodao.png" onclick="$.fn.fullpage.moveNext(true);"  class="btnzd"/>
			</div>
			<div class="page page3">
	
				<!-- <a href="javascript:;" class="weui-btn weui-btn_primary"  onclick="$.fn.fullpage.moveNext(true);">下一页</a> -->
				<img src="/static/weui/images/dl/dl.png" onclick="$.fn.fullpage.moveNext(true);"  class="btnzd"/>
			</div>
			<div class="page page4">
				
			<div id="oDiv" style="position: relative;">
				<div style=" position: absolute; width: 70px; z-index: 99999; top: 25%;left: 13%; text-align: center;">
				<img id="uhead" style="border-radius: 50%;width: 60px; display: block;"/>{$cuser['nickname']}
				</div>
				<img src="/static/weui/images/dl/4.jpg"  style="width: 100%;" />

			</div>
			<div>
				
			
				<input class="weui-input" id="mobile" style='border:1px solid #fff; display: none;' type="text" value="">
			</div>
			
			</div>
		</div>
	
		<ul class="indicator">
			<li>
				1
			</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	
	</div>
	<span class="start" style="display: none;"><b></b></span>
	<div id="jietu" style="display: none;">
	</div>
</body>
</html>
<script>
    var dllist=[{$dlstr|raw}];
	$(function(){
		$('#fullpage').fullpage({
			change: function (e) {
				console.log('change', e.next, e.cur);
				$('.indicator li').removeClass('cur').eq(e.cur).addClass('cur');
			},
			beforeChange:function(e){
				console.log('beforeChange', e.next, e.cur);
              
				if(e.next ==1 ||e.next ==2 ||e.next ==0 ||e.next ==-1){ //第三页停止 从0开始计算
					$.fn.fullpage.stop()
				} else {
					$.fn.fullpage.start()
				}
			},
			afterChange: function (e) {
				//console.log('afterChange', e.next, e.cur);
				$.fn.fullpage.stop();
				if(e.cur==3)
				{
					dl();
					//setTimeout('dl()',2000);
				}
			},
			loop:false
		});
		var dlse=$("#mobile").select({
        title: "请确认要点亮的区域",
        items: dllist,
		beforeClose: function(values, titles) {
        },
        onChange: function(d) {
           // console.log(d,1);
		   $.confirm('您将要为'+d.titles+'点亮助力', function(){ 
			console.log("点击了确定按钮"); goadddl(d.values) },function(){
				console.log('点击了取消按钮'+d.values);
				$("#mobile").click();
			})
        },
        onClose: function (d) {
			//console.log(d.data.titles,'提交数据库');
		}
      });
   });

	function goadddl(qxid)
	{
		//$.showLoading('正在点亮');
		$.ajax({
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			type: "get",
			data: {qxid: qxid},
			async: true,
				success: function(res) {
				    console.log(res);
					//$.hideLoading();
					if(res.code==201)
					{
						$.toast(res.msg,'text',getimg());
					}else if(res.code==204)
					{
						$.toast(res.msg,'text');
					}
					else{$.toast('网络异常','text',function(){});}
					
				}
			})
	}

//弹出层
 function isfollowqr4(base64data){
	 n=document.createElement("div");
	 n.classList.add("weui-model");
	 var t='<span class="close" onclick="$(\'.weui-model\').remove();"></span>';
	 var zf='<div class="zfs">点击上方转发朋友圈&nbsp; <span class="icon icon-20" style="font-size:27px;"></span></div>';
	 l="onclick=\"$('.weui-model').remove();\"";
	 n.innerHTML='<div class="model-mask">'+zf+'</div><div class="model-main">'
		        +'<img style="width:100%" src="'+base64data+'">'
		        +'长按保存图片</div>',
	 document.body.appendChild(n)}

getBase64Image("{$cuser['headimgurl']}","uhead");
function getBase64Image (url,uhead) {
	var image = new Image()
	image.src = url // 处理缓存
	image.crossOrigin = '*' // 支持跨域图片
	image.onload = function () {
	var base64 = drawBase64Image(image);
	 $("#"+uhead).attr('src',base64);
	 console.log($("#"+uhead))
    }
}
function drawBase64Image (img) {
	console.log(img.width/2,img.height);
	var canvas = document.createElement('canvas');
	canvas.width = img.width;
	canvas.height = img.height;
	var ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0, img.width, img.height)
	var dataURL = canvas.toDataURL('image/jpeg',1.0)
	return dataURL
}

function getimg()
{
	var oDiv = document.getElementById('oDiv');
	html2canvas(oDiv).then(function(canvas) {
		// document.getElementById("jietu").appendChild(canvas);
		// var oCavans = document.getElementsByTagName('canvas')[0];
		var strDataURI = canvas.toDataURL('image/jpeg',0.98);
		isfollowqr4(strDataURI);
		//downLoadFn(strDataURI);
	});
} 
function dl()
{
	$("#mobile").click();
}
</script>